<template>
  <div>
    app======{{ $store.state.colt }}==={{ colt1 }}==={{ colt }}=={{ name }}
    <button @click="fn">点我加10</button>
    <!-- <router-view></router-view> -->
    <button @click="ff">点我加100</button>
    <button @click="fr">这也是一个按钮</button>
    <h1>累加和{{ $store.getters.sum }}</h1>
    <h1>累加和{{ sum }}</h1>
    <h1>{{ $store.state.Yi.aa.name }}</h1>
    <h1>{{ $store.state.Er.bb }}</h1>
    <button @click="fff">年龄按钮</button>
    {{ $store.state.Yi.aa.age }}
    <Father></Father>
    <Uncle></Uncle>
  </div>
</template>
<script>
import Father from './Vuex/Father.vue'
import Uncle from './Vuex/Uncle.vue'
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: '',
  components: {
    Father,
    Uncle
  },
  data () {
    return {
      obj: {
        n: 100
      }
    }
  },
  created () {
    console.log(this.$store.state, 233333);
  },
  computed: {
    colt1 () {
      return this.$store.state.colt
    },
    ...mapState(['colt', 'name']),
    ...mapGetters(['sum'])
  },
  methods: {
    //mutations和actions里映射
    ...mapMutations(['add']),
    //通过映射
    ...mapActions(['add1']),
    fn () {
      console.log(this.$store.commit, 111);
      this.$store.commit('add')
      // this.$store.state.colt++
    },
    ff () {
      // this.$store.commit('add', this.obj)
      this.add(this.obj)
    },
    fr () {

      // console.log(this);

      // 1，直接通过this.$store.dispatch来使用
      // this.$store.dispatch('add1', 10)
      //2，映射之后可以直接通过this.映射过来的函数
      this.add1(10)
    },
    fff () {
      this.$store.commit('Yi/fff')
    }
  }
}
</script>
<style lang='less'  scoped>
</style>
